<template>
  <div class="temp2" :style="{ background: '#' + info.middleBackColor }">
    <div
      class="top"
      :style="{
        backgroundImage: `url(${topTu})`
      }">
      <div
        v-if="hiddenFlag && buildingNameFlag"
        class="topBuildingName"
        :style="{ color: '#' + info.headTailFontColor }">
        <i class="iconfont icon-xiangmu1 iconClass" :style="{ color: '#' + info.iconColor }"></i>
        {{ $dt.buildInfo().housesName }}
      </div>
    </div>

    <div class="conBox">
      <div class="con">
        <div
          v-if="!screenThree.hidden"
          :class="[screenThree.titleCalss ? 'title1' : 'title']"
          v-html="screenThree.titleRichText"
          :style="{ color: '#' + info.titleFontColor, backgroundColor: '#' + info.titleBackColor }"></div>
        <div
          :class="[
            info.templateType == 3 ? 'flexRow' : info.templateType == 4 ? 'flexReverse' : '',
            'conText'
          ]"
          :style="{ borderTop: '4px solid #' + info.titleBackColor }">
          <div class="conImg" v-if="screenThree.picClipUrl">
            <img :src="screenThree.picClipUrl" />
          </div>
          <div class="article" v-if="screenThree.contentRichText" v-html="screenThree.contentRichText"></div>
        </div>
      </div>
    </div>

    <div
      class="erBottom"
      :style="{
        backgroundImage: `url(${bottomTu})`
      }">
      <div class="erbox">
        <div class="topColor" :style="{ background: '#' + info.iconColor }"></div>
        <div class="avatar" v-if="hiddenFlag">
          <img src="https://static.tospurfang.com/dt-management/activity/tou.png" />
        </div>

        <div v-if="hiddenFlag" class="erText" :style="{ color: '#' + info.headTailFontColor }">
          <p class="p1">姓名</p>
          <p class="p2">
            <i class="iconfont icon-shouji iconClass1" :color="`#${info.headTailFontColor}`"></i>
            <span>手机号码</span>
          </p>
          <p class="p2 p3">
            <i class="iconfont icon-dizhi iconClass1" :color="`#${info.headTailFontColor}`"></i>
            <span>这里是项目地址</span>
          </p>
        </div>
        <div v-if="hiddenFlag" class="erImg">
          <img src="https://static.tospurfang.com/dt-management/activity/er.png" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        hiddenFlag: true,
        buildingNameFlag: true,
        topTu: '',
        bottomTu: '',
        info: '',
        screenThree: {
          contentRichText:
            '请输入正文内容，请输入正文内容，请输入正文内容，请输入正文内容，请输入正文内容，请输入正文内容请输入正文内容，请输入正文内容，请输入正文内容',
          picClipUrl: 'https://static.tospurfang.com/dt-management/activity/placeholder.png',
          titleRichText: '请输入标题，请输入标题，请输入标题',
          hidden: false
        }
      }
    },
    watch: {
      '$store.state.buildingNameFlag': {
        handler(newValue, oldValue) {
          this.buildingNameFlag = newValue
        },
        deep: true,
        immediate: true
      },
      '$store.state.hiddenFlag': {
        handler(newValue, oldValue) {
          this.hiddenFlag = newValue
        },
        deep: true,
        immediate: true
      },
      '$store.state.screenInfo': {
        handler(newValue, oldValue) {
          this.info = newValue
          this.topTu = this.info.accessoryBOList1 ? this.info.accessoryBOList1[0]?.url : this.info.headPicUrl

          this.bottomTu = this.info.accessoryBOList2
            ? this.info.accessoryBOList2[0]?.url
            : this.info.tailPicUrl
        },
        deep: true,
        immediate: true
      },
      '$store.state.screenThree': {
        handler(newValue, oldValue) {
          if (newValue) {
            this.screenThree.contentRichText = newValue.contentRichText
            this.screenThree.picClipUrl = newValue.picClipUrl
            this.screenThree.titleRichText = newValue.titleRichText
            this.screenThree.hidden = newValue.hidden
            this.screenThree.titleCalss = newValue.titleCalss
          } else {
            this.screenThree = {
              contentRichText:
                '请输入正文内容，请输入正文内容，请输入正文内容，请输入正文内容，请输入正文内容，请输入正文内容请输入正文内容，请输入正文内容，请输入正文内容',
              picClipUrl: 'https://static.tospurfang.com/dt-management/activity/placeholder.png',
              titleRichText: '请输入标题，请输入标题，请输入标题',
              hidden: false,
              titleCalss: true
            }
          }
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .temp2 {
    display: block;
    width: 375px;
    height: 100%;
  }
  .top {
    height: 168px;
    width: 100%;
    background-size: 100% 100%;

    .topBuildingName {
      font-size: 20px;
      color: #333;
      padding: 36px 16px 0;
      text-align: right;
      font-weight: bold;
    }
  }
  .conBox {
    padding: 0 16px 16px;
    margin-top: -2px;
    .con {
      word-wrap: break-word;
      padding-top: 12px;
      .title {
        width: 100%;
        padding: 16px 20px 23px;
      }
      .title1 {
        margin-top: 12px;
        font-size: 43px;
        font-weight: bold;
        line-height: 47px;
        width: 100%;
        padding: 16px 20px 23px;
      }
      .conText {
        margin-top: 24px;
        background: #fff;
        padding: 0 20px 20px;
        box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.07);
      }
      .flexRow {
        display: flex;
        flex-direction: column;
      }
      .flexReverse {
        display: flex;
        flex-direction: column-reverse;
      }
      .conImg {
        margin-top: 20px;
        width: 100%;
        img {
          width: 100%;
        }
      }
      .article {
        width: 100%;
        margin-top: 20px;
      }
    }
  }
  .erBottom {
    margin-top: 12px;
    padding: 16px 16px 0;
    height: 145px;
    width: 100%;
    background-size: 100% 100%;
    .erbox {
      position: relative;

      display: flex;
      flex-direction: row;
      padding-top: 20px;
      border-top: 1px #a9a9a9 solid;
      .avatar {
        img {
          display: block;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .erText {
        margin-left: 12px;
        padding-right: 16px;
        flex: 1;
        .p1 {
          font-size: 16px;
          font-weight: bold;
          line-height: 18px;
          margin-top: 6px;
        }
        .p2 {
          font-size: 14px;
          margin-top: 4px;
          img {
            display: inline-block;
            margin-top: 4px;
            margin-right: 2px;
            width: 12px;
            height: 12px;
          }
        }
        .p3 {
          font-size: 12px;
        }
      }
      .erImg {
        width: 100px;
        padding-left: 20px;
        position: relative;

        img {
          display: block;
          width: 64px;
          height: 64px;
          border-radius: 50%;
        }
      }
      .erImg::after {
        content: ' ';
        height: 65px;
        width: 1px;
        background-color: #e9e9e9;
        position: absolute;
        left: 0;
        top: 9px;
      }
    }
    .topColor {
      width: 40px;
      height: 6px;
      position: absolute;
      top: -1px;
      left: 0;
    }
  }
  .iconClass {
    font-size: 20px;
  }
  .iconClass1 {
    font-size: 14px;
    // margin-top: -2px;
  }
</style>
